<template>
    <div class="content">
        <div class="card_header">
            
        </div>

        <div class="card_list">
            <div class="card_header_button">
                <a-button type="primary">新增</a-button>
                <a-button type="primary" status="danger">删除</a-button>
            </div>
            <a-table :columns="columns" :data="data" :loading="loading">
                <template #gender="{ record }">
                    {{ record.gender === '0' ? '女' : record.gender === '1' ? '男' : '未知' }}
                </template>
                <template #action="{ record }">
                    <a-button type="text">编辑</a-button>
                </template>
            </a-table>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { selectUser } from '@/api/user';


// 表格配置
const columns = ref([
  {title: "用户id", dataIndex: "userId"},
  {title: "账号", dataIndex: "account"},
//   {title: "密码哈希（bcrypt）", dataIndex: "passwordHash"},
  {title: "昵称", dataIndex: "nickname"},
  {title: "头像", dataIndex: "avatar"},
  {title: "手机号", dataIndex: "phone"},
  {title: "身份证号", dataIndex: "idCard"},
  {title: "姓名", dataIndex: "realName"},
  {title: "性别", dataIndex: "gender",slotName: "gender"},
  {title: "出生年月", dataIndex: "birthDate"},
//   {title: "个人简介", dataIndex: "profile"},
  {title: "地址", dataIndex: "address"},
  {title: "邮箱", dataIndex: "email"},
  {title: "操作", dataIndex: "action",slotName: "action"}
//   {title: "创建时间", dataIndex: "createTime"},
//   {title: "修改时间", dataIndex: "updateTime"}
]);
const loading = ref(false);
const data = ref([]);
function selectUserApi() {
    loading.value = true;
    selectUser().then(res => {
        data.value = res.data;
        loading.value = false;
    });
}

onMounted(() => {
    selectUserApi();
});

</script>

<style scoped>

</style>